<template>
	<view class="content1">
		<view class="box-c content">
			<view class="login box d-ai-c">
				<image v-if="loginState" :src="shopInfo.shopInfo.shopLogo" mode="widthFix"></image>
				<image v-if="!loginState" src="../../static/user/moren.png" mode="widthFix" @tap="loginView"></image>
				<view class="flex-3 ml-2">
					<text v-if="loginState">{{shopInfo.shopInfo.shopName}}</text>
					<text v-if="!loginState" @tap="loginView">立即登陆</text>
				</view>
				<view class="flex-1">
					<text class="iconfont icon-scanicn" @tap="scan"></text>
					<text class="iconfont icon-shezhi" @tap='settingView'></text>
				</view>
			</view>
			<view class="statistics box-c " v-if="loginState">
				<view class="box d-jc-sa text-center mt-2 market">
					<view class="box-c d-ai-c">
						<text class="">{{salesData.todayIntegral}}</text>
						<text>今日营业额</text>
					</view>
					<view class="box-c d-ai-c">
						<text class="">{{salesData.todayOrdersNumber}}</text>
						<text>今日订单量</text>
					</view>
					<view class="box-c d-ai-c">
						<text class="">{{salesData.allOrderPrice}}</text>
						<text>总收入(积分)</text>
					</view>
				</view>

			</view>
			<view class="order">
				<view class="box d-jc-sb title">
					<view class="">我的订单</view>
					<view class="" @tap="openOrderList(0,-1,'','')">
						<text>全部订单</text>
						<text class="iconfont icon-qianjin"></text>
					</view>
				</view>
				<view class="box d-jc-sa text-center order-info mt-2" v-if="!isDispatching">

					<view  class="box-c position-relative" @tap="openOrderList(1,-1,'1','')">
						<text class="iconfont icon-daiqueren"></text>
						<view class="orderNumber" v-if="orderNumber.waitDestroy>0">
							{{orderNumber.waitDestroy}}
						</view>
						<text>待核销</text>
					</view>
					<view class="box-c position-relative" @tap="openOrderList(2,-1,'2','')">
						<text class="iconfont icon-yiwancheng"></text>
						<text>已完成</text>
					</view>
					<view class="box-c position-relative" @tap="openOrderList(3,-1,'9','')">
						<text class="iconfont icon-tuikuan"></text>
						<view class="orderNumber" v-if="orderNumber.waitRefund>0">
							{{orderNumber.waitRefund}}
						</view>
						<text>退款</text>
					</view>
				</view>
				<view class="box d-jc-sa text-center order-info mt-2" v-if="isDispatching">
					<view class="box-c position-relative" @tap="openOrderList(1,1,'1','1')">
						<text class="iconfont icon-daipeisong"></text>
						<view class="orderNumber" v-if="orderNumber.waitTakes>0">
							{{orderNumber.waitTakes}}
						</view>
						<text>待配送</text>
					</view>
					<view class="box-c position-relative" @tap="openOrderList(2,1,'1','-1')">
						<view class="box-c d-ai-c">
							<text class="iconfont icon-daipeisong"></text>
							<text>待自提</text>
						</view>
						<view class="orderNumber" v-if="orderNumber.waitGet>0">
							{{orderNumber.waitGet}}
						</view>
					</view>
					<view class="box-c position-relative" @tap="openOrderList(3,1,'1','2')">
						<text class="iconfont icon-daiqueren"></text>
					
						<text>待确认</text>
						<view class="orderNumber" v-if="orderNumber.waitConfirm>0">
							{{orderNumber.waitConfirm}}
						</view>
					</view>
					<view class="box-c position-relative" @tap="openOrderList(4,1,'2','')">
						<text class="iconfont icon-yiwancheng"></text>
						<text>已完成</text>
					</view>
					<view class="box-c position-relative" @tap="openOrderList(5,1,'9','')">
						<text class="iconfont icon-tuikuan"></text>
						<view class="orderNumber" v-if="orderNumber.waitRefund>0">
							{{orderNumber.waitRefund}}
						</view>
						<text>退款</text>
					</view>
				</view>

			</view>
			
			<!-- <view class="more">
				<view class="box d-jc-sb title">
					<view class="">更多功能</view>
				</view>

				<view class="box d-jc-sa text-center mt-2 function">
					<view class="box-c">
						<text class="iconfont icon-daipeisong"></text>
						<text>商品管理</text>
					</view>
					<view class="box-c">
						<text class="iconfont icon-daiqueren"></text>
						<text>订单管理</text>
					</view>
					<view class="box-c">
						<text class="iconfont icon-yiwancheng"></text>
						<text>店铺管理</text>
					</view>
				</view>
			</view> -->



		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				salesData: '',
				isDispatching: true,
				orderNumber: ''
			}
		},
		onShow() {
			console.log(JSON.stringify(this.shopInfo))
			this.getSalesData()
			this.shopType()
		},
		computed: mapState(['shopInfo', 'loginState', 'orderParameter']),
		methods: {
			...mapMutations(['login']),

			shopType() {
				if (this.loginState) {
					//判断商家类型
					if (this.shopInfo.shopInfo.isDispatching == 1) {

					} else if (this.shopInfo.shopInfo.isDispatching == -1) {
						this.isDispatching = false
					}
					this.$store.state.isDispatching = this.isDispatching

				} else {
					this.isDispatching = true
					this.orderNumber = {}
				}

			},

			openOrderList(index, type, state, takesState) {
				if (!this.loginState) {
					uni.navigateTo({
						url: 'login'
					})
					return
				}
				let par = {
					index: index, //索引
					type: type,   //类型
					state: state, //
					takesState: takesState //配送转态
				}
				this.$store.state.orderParameter = par
				uni.navigateTo({
					url: '../order/orderList'
				})
			},


			//获取店铺数据
			getSalesData() {
				if (this.loginState) {
					this.$api.getSalesData({}).then((res) => {
						this.salesData = res.data.dataMap
					})
					this.$api.getOrdersClassifyNumber({}).then((res) => {
						this.orderNumber = res.data.dataMap
					})

				}

			},
			getOrderinfo(orderNumber) {
				this.$api.orderInfoByOrderNumber({
					orderNumber: orderNumber
				}).then((res) => {
					if (res.data.success) {
						this.$store.state.orderInfo = res.data.dataMap
						uni.navigateTo({
							url: `/pages/order/order`
						})
						return;
					} else {
						if (res.data.code != 20001) {
							uni.showToast({
								title: res.data.message,
								duration: 1500,
								icon: "none"
							});
						}
						return;
					}
				})
			},
			scan() {
				//开始扫码
				this.$api.checkShopLogin({}).then((res) => {
					if (!res.data.success) {
						return;
					} else {
						//开始扫码
						this.toHsScanCode({
							evalName: "hs-scancode", //扫码回调监听事件
							msg: "扫一扫", //提示文本
							fil: '0,1,2' //条码类型
						}, res => {
							//扫码成功后 这里自己判断，如果要自己处理结果就返回 true

							return false
						})
					}
				})
			},
			toHsScanCode(options, results) { //这里可以写成一个通用方法
				let _this = this
				const q = Object.entries(options).map(([key, value]) => `${key}=${value}`).join('&')
				uni.$on(options.evalName || "hs-scancode", ([error, res]) => {
					if (res) { //扫码结果
						uni.navigateBack({
							delta: 1,
							animationType: "fade-out", //用 fade-out 关闭页面，减少扫码成功后跳转页面的闪动
							animationDuration: 300,
						})
						if (results && results(res) === true) return;
						_this.getOrderinfo(res.result)
					} else {
						if (error.errMsg === "scanCode:fail cancel") toast("扫码取消")
						else toast("扫码出错")
					}
				})
				uni.navigateTo({
					url: `/pages/hs-scancode/hs-scancode?${q}`
				})
			},
			settingView() {
				uni.navigateTo({
					url: 'setting'
				})
			},
			loginView() {
				uni.navigateTo({
					url: 'login',
					animationType: 'slide-in-bottom'
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	.content1 {
		position: absolute;
		height: 100%;
		width: 100%;
		background: #f8f8f8;
		top: 0;
		left: 0;
	}

	.content {
		padding: 20rpx 30rpx;
		.position-relative{
			position: relative;
			text{
				text-align: center;
			}
		}

		.orderNumber {
			position: absolute;
			width: 26rpx;
			height: 26rpx;
			line-height: 26rpx;
			font-size: 24rpx;
			color: #FF5551;
			background-color: #fff;
			border: solid 4rpx #FF5551;
			border-radius: 50rpx;
			right: 10rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 26rpx;

		}

		.statistics {
			background-color: #fff;
			width: 650rpx;
			height: 160rpx;
			border-radius: 15rpx;
			margin: 20rpx 0;
			padding: 20rpx;

			.market {
				view {
					text:first-child {
						font-size: 40rpx;
						color: #FF5551;
					}

					text:last-child {
						color: #666666;
					}
				}

			}
		}

		.more {
			background-color: #fff;
			width: 650rpx;
			height: 200rpx;
			border-radius: 15rpx;
			margin: 20rpx 0;
			padding: 20rpx;

			.function {
				view {
					text:first-child {
						width: 70rpx;
						height: 70rpx;
						font-size: 50rpx;
						line-height: 70rpx;
						margin: 0 auto;
						color: #FF5551;
					}

					text:last-child {
						color: #666666;
					}
				}

			}

			.title {
				color: #333;
				font-weight: Bold;
			}
		}

		.order {
			background-color: #fff;
			width: 650rpx;
			height: 200rpx;
			border-radius: 15rpx;
			margin: 20rpx 0;
			padding: 20rpx;

			.order-info {
				view {
					text:first-child {
						width: 70rpx;
						height: 70rpx;
						font-size: 50rpx;
						line-height: 70rpx;
						margin: 0 auto;
						color: #FF5551;
					}

					text:last-child {
						color: #666666;
					}
				}

			}

			.title {
				view:nth-child(1) {
					color: #333;
					font-weight: Bold;
				}

				view:nth-child(2) {
					color: #666;
					font-size: 20rpx;
				}
			}
		}

		.login {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			view:nth-child(2) {
				font-size: 40rpx;
			}


			.icon-scanicn,
			.icon-shezhi {
				font-size: 40rpx;
				padding: 0 15rpx;
				color: #2b2b2b;
				font-weight: 700;
			}

		}
	}
</style>
